<template>
  <div class="app-container">
    <div style="width: 100%; height: 600px ;float:left">
      <el-form ref="Form" :inline="true" :model="Form" :rules="Rules">
        <el-select v-model="value" placeholder="请选择" style="width: 120px">
          <el-option
            label="故障名称"
            value="1"
          />
          <el-option
            label="机组编号"
            value="2"
          />
        </el-select>
        <el-form-item v-if="vis1" prop="uname">
          <el-input v-model="Form.uname" placeholder="请输入故障名称" />
        </el-form-item>
        <el-form-item v-if="vis2" prop="jobNumber">
          <el-input v-model="Form.jobNumber" placeholder="请输入机组编号" :validate-event="false" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button v-if="isShow1" type="primary" @click="getData">取消查询</el-button>
      </el-form>
      <el-table
        stripe
        border
        height="500"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{'text-align': 'center'}"
      >
        <el-table-column
          prop="faultName"
          label="故障名称"
          align="center"
        />
        <el-table-column
          prop="faultTurbine"
          label="机组编号"
          align="center"
        />
        <el-table-column
          prop="faultReportingTime"
          label="故障停机时间"
          align="center"
        />
        <el-table-column
          prop="resetRunningTime"
          label="维修时间"
          align="center"
        />
        <el-table-column
          prop="loss"
          label="发电量损失"
          align="center"
        />
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="维修人员信息"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form label-position="top" label-width="80px" :model="form2" :inline="true">
          <el-form-item label="姓名">
            <el-input v-model="form2.uname" />
          </el-form-item>
          <el-form-item label="工号">
            <el-input v-model="form2.jobNumber" :disabled="true" />
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="form2.role" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  delMaintainer,
  editMaintainer, saveMaintainer
} from '@/api/maintainer'
import { getAllSearchInfo, getSearchInfoByName, getSearchInfoByFid } from '@/api/search'

export default {
  data() {
    const validateNum = (rule, value, callback) => {
      if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      value: '',
      vis1: true,
      vis2: false,
      total: 1,
      pageSize: 1,
      isShow1: false,
      dialogVisible: false,
      currentPage: 1,
      tableData: [],
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      Form: {
        uname: '',
        jobNumber: ''
      },
      Rules: {
        uname: [
          { required: true, message: '请输入故障名称', trigger: 'blur' }
        ],
        jobNumber: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ]
      },
      form2: {
        uname: '',
        jobNumber: '',
        role: ''
      },
      form23: {
        uname: '',
        jobNumber: '',
        role: ''
      },
      rules: {
        uname: [
          { required: true, trigger: 'blur' }
        ],
        jobNumber: [
          { required: true, trigger: 'blur', validator: validateNum }
        ],
        role: [
          { required: false, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function(newval, oldval) {
        if (newval === '1') {
          this.vis1 = true
          this.vis2 = false
        } else if (newval === '2') {
          this.vis2 = true
          this.vis1 = false
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getAllSearchInfo().then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
        this.Form.uname = ''
        this.Form.jobNumber = ''
        this.isShow1 = false
      })
    },
    onSubmit() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          if (this.vis1 === true) {
            getSearchInfoByName(this.Form.uname).then(({ data }) => {
              this.total = data.page.total
              this.pageSize = data.page.size
              this.tableData = data.page.records
              this.Form.uname = ''
              this.Form.jobNumber = ''
              this.vis2 = false
              this.isShow1 = true
            })
          } else if (this.vis2 === true) {
            getSearchInfoByFid(this.Form.jobNumber).then(({ data }) => {
              this.total = data.page.total
              this.pageSize = data.page.size
              this.tableData = data.page.records
              this.Form.uname = ''
              this.Form.jobNumber = ''
              this.vis1 = false
              this.isShow1 = true
            })
          }
        }
      })
    },
    handleEdit(row) {
      this.modalType = 1
      this.dialogVisible = true
      this.$nextTick(function() {
        this.form2 = Object.assign(this.form2, row)
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该维修人员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMaintainer(row.jobNumber).then(() => {
          this.handleCurrentChange(this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange(pageNum) {
      getAllSearchInfo(pageNum).then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
      })
    },
    handleClose() {
      // 关闭弹窗
      this.dialogVisible = false
    },
    cancel() {
      this.handleClose()
    },
    submit() {
      // 后续对表单的处理
      editMaintainer(this.form2).then(() => {
        // 重新获取当前页列表的接口
        this.handleCurrentChange(this.currentPage)
      })
      // 关闭弹窗
      this.dialogVisible = false
    },
    cancel1() {
      this.form23.uname = ''
      this.form23.jobNumber = ''
      this.form23.role = ''
    },
    submit1() {
      this.$refs.form23.validate((valid) => {
        if (valid) {
          saveMaintainer(this.form23).then(() => {
            // 重新获取列表的接口
            getAllSearchInfo().then(({ data }) => {
              this.currentPage = data.page.pages
            })
          })
        }
      })
    }
  }
}
</script>

<style>
.app-container {
  margin: 0 auto;
}

.dialog-footer {
  display: block;
  text-align: center
}

</style>

